<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
// props: ['currentIndex']
import { useRoute } from 'vue-router'
import { onMounted, ref, watch } from 'vue'

let currentIndex = ref(0)
const route = useRoute()
onMounted(() => {
  route.path
})
watch(
  () => route.path,
  () => {
    console.log(route.path)
    switch (route.path) {
      case '/home':
        currentIndex.value = 0
        break
      case '/cart':
        currentIndex.value = 1
        break
      case '/order':
        currentIndex.value = 2
        break
      case '/my':
        currentIndex.value = 3
        break
      default:
        currentIndex.value = 0
    }
  },
  { immediate: true }
)

// axios get tabbarList
//数据
const tabbarList = [
  { icon: '&#xe651;', text: '首页', to: { path: '/home' } },
  { icon: '&#xe690;', text: '购物车', to: { path: '/cart' } },
  { icon: '&#xe655;', text: '订单', to: { path: '/order' } },
  { icon: '&#xe60b;', text: '我的', to: { path: '/my' } }
]
</script>

<template>
  <!-- 底部tabbar -->
  <div class="tabbar">
    <div
      class="tabbar_item"
      :class="{ 'tabbar_item--active': currentIndex == index }"
      v-for="(item, index) in tabbarList"
      :key="item.text"
    >
      <RouterLink :to="item.to" active-class="active">
        <span class="iconfont" v-html="item.icon"></span>
        <span class="tabbar_title">{{ item.text }}</span>
      </RouterLink>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';

.tabbar {
  width: 100%;
  height: 0.49rem;
  position: fixed; //固定定位单词为fixed
  left: 0;
  bottom: 0px;
  border-top: 0.01rem solid $content_bgColor;
  display: flex;
  background-color: #fff;

  // .tabbar_item
  &_item {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;

    a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      color: $content_fontcolor;
    }

    //活动样式
    &--active {
      a {
        color: #1fa4fc;
      }
    }
  }
}
</style>